<template>
  <div>
    <h1>医院负责人</h1>
    <div  style="width: 40%;">
        <el-input suffix-icon="el-input__icon el-icon-search"  type="text" placeholder="输入手机号或者姓名" style="width: 300px" v-model="input"></el-input>
        <el-button icon="el-icon-search" type="primary" size="small" @click="getAllHospMangers">查询</el-button>
        <el-button type="primary" size="small" @click="clear">重置</el-button>
    </div>
    <div
        style="
          background-color: #e76271;
          border: 1px solid #f15323;
          margin: 0px auto;
          height: 40px;
          line-height: 40px;
          width: 100%;
          margin-top: 10px;
        "
      >
        <i
          class="el-icon-message-solid"
          style="color: #52de48; line-height: 40px"
        >
        </i>
        <label style="font-size: 14px">
          医院负责人总数：{{ hospitalMangerList.total }}
        </label>
      </div>
    <hr>
    <div >
        <el-button icon="el-icon-user-solid" style="width:75%;margin: 0px auto;" type="success" size="primary" @click="addHospManger">增加医院负责人</el-button>    
    </div>

     <!-- 表格 -->
     <el-table
        ref="multipleTable"
        :data="hospitalMangerList.list"
        tooltip-effect="dark"
        style="width: 75%; margin: 0px auto"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="index"
          label="序号"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="tbHospital.hname"
          label="医院"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="hname"
          label="姓名"
          width="120"
        ></el-table-column>
        <el-table-column prop="hgender" label="性别" width="120">
        </el-table-column>
        <el-table-column
          prop="tbHospital.province"
          label="医院所属省"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="tbUser.phone"
          label="电话"
          width="120"
        ></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="medium " type="danger" icon="el-icon-delete" circle @click="delManger(scope.row,1)"
              >删除</el-button>
              <el-button size="medium " type="warning" icon="el-icon-moon-night" circle @click="delManger(scope.row,2)"
              >卸任</el-button>
            <el-button size="small " type="success" icon="el-icon-check" circle @click="rePassword(scope.row)"
              >重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 增加模态框开始 -->
    <el-dialog title="增加医院负责人" :visible.sync="addDialogVisable">
      <el-form :model="addHosptialManger" @keyup.native.enter="saveAddHosptialManger">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="addHosptialManger.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisable = false">取 消</el-button>
        <el-button type="primary" @click="saveAddHosptialManger">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 增加模态框结束 -->
     <!-- 分页 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="hospitalMangerList.pageNum"
      :page-sizes="[5, 10, 15, 20]" 
      :page-size="hospitalMangerList.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="hospitalMangerList.total"
    >
    </el-pagination>

  </div>
</template>

<script>
import {getAllHospManger,deleteMangerById,resetPasswordById,saveHospitalMer} from "@/api/hospitalManger.js"

export default {
    data(){
        return {
            input:"",
            allHospital:[],
            pageInfo: {
                pageNum: 1,
                pageSize: 5,
            },
            hospitalMangerList:[],
            addDialogVisable:false,
            addHosptialManger:{}

        }
    },
    mounted(){
        this.getAllHospMangers();
    },
    methods:{
        handleSizeChange(val) {
            this.pageInfo.pageSize = val;
            this.pageInfo.pageNum = 1;
            this.getAllHospMangers()
        },
        handleCurrentChange(val) {
            this.pageInfo.pageNum = val;
            this.getAllHospMangers()
        },


        getAllHospMangers(){
            getAllHospManger({
                pageNum : this.pageInfo.pageNum,
                pageSize : this.pageInfo.pageSize,
               input:this.input,
            }).then(res=>{
                if(res.data.code==200){
                    this.hospitalMangerList =res.data.data
                }
            })
        },
        clear(){
            this.input=""
            this.getAllHospMangers()
        },
        delManger(row,a){
             // 确认框确认是否要删除
            this.$confirm("确定要删除<-"+row.hname+"负责人->吗?", "提示", {
                iconClass: "el-icon-question", //自定义图标样式
                confirmButtonText: "残忍删除", //确认按钮文字
                cancelButtonText: "留你小命", //取消按钮文字
                showClose: true, //是否显示右上角关闭按钮
                type: "warning", //提示类型  success/info/warning/error
            }).then(res=> {  //选择确认按钮进入此方法
                //确认操作
                deleteMangerById({
                    id: row.id,
                    flag:a

                }).then(res=>{
                        if(res.data.code==200){
                            this.$message({
                                type:"success",
                                message:"删除"+row.hname+"成功"
                            })
                        this.getAllHospMangers()    
                        }
                    })
                }).catch(() => { //选择取消按钮进入此方法
            });    
        },
        rePassword(row){
            this.$confirm("确定要初始化"+row.hname+"的密码吗?", "提示", {
                iconClass: "el-icon-question", //自定义图标样式
                confirmButtonText: "重置", //确认按钮文字
                cancelButtonText: "取消", //取消按钮文字
                showClose: true, //是否显示右上角关闭按钮
                type: "warning", //提示类型  success/info/warning/error
            }).then(res=> {  //选择确认按钮进入此方法
                //确认操作
                resetPasswordById(row.uid).then(res=>{
                        if(res.data.code==200){
                            this.$message({
                                type:"success",
                                message:row.hname+"的密码初始化成功,密码为123"
                            })
                        this.getAllHospMangers()    
                        }
                    })    
                }).catch(() => { //选择取消按钮进入此方法
            });    
        },
        addHospManger(){
            this.addDialogVisable=true
        },
        saveAddHosptialManger(){
            saveHospitalMer(this.addHosptialManger.phone).then(res=>{
                if(res.data.code == 200){
                    this.addDialogVisable=false
                    this.$message({
                        type:"success",
                        message:"账户"+this.addHosptialManger.phone+"增加成功,密码为123,请尽快填写个人资料"
                    })
                    this.getAllHospMangers()    
                }
            })
        },
    }

}
</script>

<style>

</style>